<%--
  Author: DawnFz.com
  Date: 2022/9/14 17:12
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/static/css/table.css"/>
    <title>公告</title>
    <script src="${ctxPath}/static/layui/layui.js"></script>
    <script src="${ctxPath}/static/js/jquery-3.6.1.min.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title"
          style="margin-top: 20px;">
    <legend>流程列表</legend>
</fieldset>
<!-- {1}放置搜索栏 【018行】 -->
<%--<form class="layui-form" style="margin-top: 40px">--%>
<%--    <div class="layui-form-item" style="margin-bottom:5px;">--%>


<%--        <div class="layui-inline">--%>
<%--            <label class="layui-form-label">角色名称</label>--%>
<%--            <div class="layui-input-inline">--%>
<%--                <input type="text" name="frmRoleName" id="frmRoleName"--%>
<%--                       autocomplete="off" class="layui-input">--%>
<%--            </div>--%>
<%--        </div>--%>

<%--        <div class="layui-inline">--%>
<%--            <label class="layui-form-label">角色描述</label>--%>
<%--            <div class="layui-input-inline">--%>
<%--                <input type="text" name="frmDescript" id="frmRoleDesc"--%>
<%--                       autocomplete="off" class="layui-input">--%>
<%--            </div>--%>
<%--        </div>--%>

<%--        <button type="button"--%>
<%--                class="layui-btn" onclick="doSearch();"--%>
<%--                style="margin-left:10px;">立即搜索--%>
<%--        </button>--%>

<%--        <button type="reset"--%>
<%--                class="layui-btn layui-btn-normal"--%>
<%--                style="margin-left:10px;">重置--%>
<%--        </button>--%>
<%--    </div>--%>
<%--</form>--%>


<!-- {2}放置动态表格 -->
<table class="layui-hide" id="demo" lay-filter="test">
</table>

<!-- {3}表格工具栏 -->
<script type="text/html" id="barDemo">
    <%--    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>--%>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
<script src="${ctxPath}/static/js/form.js"></script>

<script>
    function updateSelect(id) {
        var $sel = $(id);
        var $dd = $sel.parent().find("dd");
        for (var idx = 0; idx < $dd.size(); idx++) {
            var obj = $dd[idx];
            if ($(obj).hasClass('layui-this')) {
                var op = $(id + " option")[idx];
                $(op).attr("selected", true);
            }
        }
    }

    //{2}定义一个搜索项目的数组
    var schFlds = ['procKey', 'note','id'];
    var preFix = "frm";

    //nickName, no,..
    //转化名字: frmNickName
    function getFrmName(key) {
        var first = key.substring(0, 1);
        var tail = key.substring(1, key.length);
        return preFix + first.toUpperCase() + tail;
    }

    function doSearch() {
        //{1}创建一个条件对象。
        var cond = {};
        //{2}遍历数组, 把要搜索的栏目存入到  cond 条件
        for (var i = 0; i < schFlds.length; i++) {
            var fld = schFlds[i];         //nickName
            var frmFld = getFrmName(fld); //frmNickName
            var val = $("#" + frmFld).val();
            if (val.length > 0) {
                cond[fld] = val;
            }
        }
        console.log(cond);
        //userTbl: 288行中设置表格ID [指明要更新哪个表格]
        var ran = parseInt(Math.random() * 1000000);
        layui.table.reload(
            'ProcessTbl',
            {
                url: '${ctxPath}/Workflow/jsonList?ran=' + ran,
                where: cond,
                page: {curr: 1}
            }
        );
    }

</script>

<script>
    /* ----------------------- 自定义相关数据与方法 -------------------------  */

    var gInputs = [
        {title: 'Id', name: 'id', type: 'text'},
        {title: 'procKey', name: 'procKey', type: 'text'},
        {title: 'note', name: 'note', type: 'text'},
        {name: 'id', type: 'hide'}
    ];

    function showPopBox(user) {
        var HTML = makeTable(gInputs, user);
        layer.open({
            type: 1
            , title: '编辑角色信息'      //显示标题栏
            , closeBtn: false
            , area: ['450px', '320px']
            , shade: 0
            , id: 'LAY_layuipro'   //设定一个 id, 防止重复弹出
            , btn: ['保存修改', '取消修改']  //{ps} 两个按钮
            , btnAlign: 'c'        //居中对齐
            , moveType: 1          //拖拽模式, 0 或者 1
            , content: HTML        //这是上面生成的表格 html 代码
            , yes: function () {
                saveNotify();   //调用保存用户
            }
            , success: function (layero) {
                //--暂时不写代码--
            }
        });
    }

    var items = ["id", "procKey", "note"];

    function editNotify(_id) {
        $.ajax({
            url: '${ctxPath}/Workflow/getRole?id=' + _id,
            type: 'get',
            dataType: 'json',
            success: function (resp) {
                var ret = resp['result'];
                if (ret === 'success') {
                    showPopBox(resp['data']);
                } else {
                    layer.msg("获取角色失败:" + resp.cause);
                }
            }
        });
    }


    function pickData(items) {
        var obj = {};
        for (var i = 0; i < items.length; i++) {
            obj[items[i]] = $("#" + items[i]).val();
        }
        return obj;
    }

    function saveNotify() {
        //{1}抓取表单数据。
        var user = pickData(items);
        //{2}你要测试这里有没有输出数据。
        console.log(user);

        //{2}用 ajax 提交表单。
        $.ajax({
            url: '${ctxPath}/Role/saveRole',
            type: 'post',
            data: user,
            dataType: 'json',
            success: function (resp) {
                var ret = resp['result'];
                if (ret === 'success') {
                    layer.msg('角色信息修改成功。');
                    //{ps}2秒后, 重载此页。
                    setTimeout(reloadPage, 2000);
                } else {
                    layer.msg('角色信息修改失败, 原因:' + resp.cause);
                }
            }
        });
    }

    function delNotify(_id) {
        $.ajax({
            url: '${ctxPath}/Workflow/delProcess?id=' + _id,
            type: 'get',
            dataType: 'json',
            success: function (resp) {
                var ret = resp['result'];
                if (ret === 'success') {
                    layer.msg(resp.data);
                    setTimeout(reloadPage, 2000);
                } else {
                    layer.msg("删除角色信息失败:" + resp.cause);
                }
            }
        });
    }

    function reloadPage() {
        window.location = "${ctxPath}/Workflow/viewList";
    }
</script>

<script>
    /* ----------------------- LayUI 所有组件-------------------------  */
    //{1}为了更新 js 缓存，可忽略
    layui.config({
        version: '1554901098009'
    });

    //{2}声明 LayUI 使用哪些组件。
    layui.use(
        ['laypage', 'layer', 'table', 'element'],
        function () {
            var laypage = layui.laypage //分页
                , layer = layui.layer       //弹层
                , table = layui.table       //表格
                , element = layui.element;  //元素操作

            //{A}动态表格
            var ran = Math.random();
            table.render({
                elem: '#demo'
                , height: 'auto'
                , url: '${ctxPath}/Workflow/jsonList?ran=' + ran   //数据接口
                , title: '房间表'
                , page: true     //{ps} 开启分页
                , id: 'ProcessTbl'
                //{ps} 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                //toolbar: 'default'
                , totalRow: false   //{ps} 开启合计行
                , cols: [[          //{ps} 表头
                    {type: 'checkbox', fixed: 'left'},

                    /*
                      [改动]
                                用户角色不显示:
                      1. User 类中要包含 roleName 属性。
                      2. sql 语句中要包含 roleName 属性。
                    */
                    {field: 'id', title: 'Id', width: 140, sort: true, fixed: 'left'},
                    {field: 'deploymentId', title: '部署Id', width: 180, fixed: 'left'},
                    {field: 'procDefId', title: '流程引用Id', width: 160, fixed: 'left'},
                    {field: 'procCategory', title: '流程类别', width: 135, fixed: 'left'},
                    {field: 'version', title: '版本', width: 75, fixed: 'left'},
                    {field: 'procKey', title: 'Key', width: 110, fixed: 'left'},
                    {field: 'note', title: 'Note', width: 110, fixed: 'left'},
                    {field: 'createDate', title: '创建日期', width: 185, fixed: 'left'},
                    {fixed: 'right', width: 170, align: 'center', toolbar: '#barDemo'}
                ]]
            });

            //---------------在这里加入其它的组件----------------
            table.on('tool(test)', function (obj) {
                var data = obj.data     //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'del') {
                    delNotify(data['id']);
                } else if (layEvent === 'edit') {
                    editNotify(data['id']);
                }
            });
        });
</script>
</html>



